<template>
	<view class="container">
		<u-tabs :list="categoryList || []" :itemStyle="itemStyle"
			:inactiveStyle="scrollTop > 10?inactiveStyle2:inactiveStyle"
			:activeStyle="scrollTop > 10?activeStyle2:activeStyle" :lineHeight="0" @change="tabsChange">
			<view slot="right" style="padding-left: 4px;" @tap="tabsSlotChange">
				<u-icon name="list" size="21" :color="scrollTop > 10?'#000000':'#FFFFFF'"></u-icon>
			</view>
		</u-tabs>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				itemStyle: {
					padding: '0 7.5px'
				},
				inactiveStyle: {
					fontSize: '28rpx',
					color: 'rgba(225, 225, 225, 0.8)',
				},
				inactiveStyle2: {
					fontSize: '28rpx',
					color: 'rgba(0, 0, 0, 0.5)',
				},
				activeStyle: {
					fontSize: '28rpx',
					color: '#FFFFFF',
				},
				activeStyle2: {
					fontSize: '28rpx',
					color: '#000000',
				}
			}
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				productCategoryList: (state) => state.index.productCategoryList
			}),
			categoryList() {
				const newList = [...this.productCategoryList];
				newList.unshift({
					name: '首页',
					id: 0
				});
				return newList;
			}
		},
		methods: {
			tabsSlotChange() {
				this.$switchTab('/pages/category/index')
			},
			tabsChange(e) {
				if (e.id === 0) return;
				this.$navigateTo(`/subPackages/search/list?category_id=${e.id}&mod_type=${e.mod_type}`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 16rpx 28rpx 0 15rpx;
		box-sizing: border-box;
	}
</style>